<!--
 * @Author: 四川华西绿舍建材有限公司
 * @Date: 2023-12-01 16:26:51
 * @LastEditors: 陈波
 * @LastEditTime: 2024-03-30 10:31:09
 * @Description: 
 * @FilePath: \graDesign\src\views\Home\index.vue
-->
<template>
  <div class="home" v-loading="getUserInfoLoading" loading-text="加载中...">
    <div class="layoutIndexOut">
      <LayoutIndex class="layoutIndexFixed">
        <div class="layoutIndexBox">
          <el-skeleton style="width: 300px" :loading="getUserInfoLoading" animated>
            <template #template>
              <div class="ske flex_start">
                <div>
                  <el-skeleton-item 
                    variant="image"
                    style="width: 100px; height: 100px; border-radius: 50%;" 
                  />
                </div>
                <div class="des">
                  <div class="des-item">
                    <el-skeleton-item variant="text" style="margin-right: 16px" />
                    <el-skeleton-item variant="text" style="width: 50%" />
                  </div>
                  <div class="des-item">
                    <el-skeleton-item variant="text" style="margin-right: 16px" />
                    <el-skeleton-item variant="text" style="width: 50%" />
                  </div>
                </div>
              </div>
            </template>
            <template #default>
              <div class="left">
                <div class="l-img">
                  <el-image
                    style="width: 100px; height: 100px; border-radius: 50%;" 
                    :src="userInfo.avatar" 
                    fit="fill"
                    :preview-src-list="[userInfo.avatar]"
                  />
                </div>

                <div class="l-r-info" :style="{ fontSize: fontSize }">
                  <div class="info-top">
                    <div class="info-top-name">{{ userInfo.username }}</div>
                    <div class="info-top-role">
                      <el-tag v-if="userInfo.ismanager === 2">超级管理员</el-tag>
                      <el-tag v-else-if="userInfo.ismanager === 1">管理员</el-tag>
                      <el-tag type="success" v-else-if="userInfo.ismanager === 0">用户</el-tag>
                    </div>
                  </div>
                  <div class="info-bottom">
                    <div class="info-bottom-time">{{ userInfo.createTime && userInfo.createTime.split(' ')[0] }}</div>
                    <div class="info-bottom-phone">
                      <el-icon>
                        <BasicIcon iconName="icon-phone" />
                      </el-icon>
                      <div style="margin-left: 5px">{{ userInfo.phone }}</div>
                    </div>
                  </div>
                </div>

              </div>
            </template>
          </el-skeleton>

          <div class="right">
            <BasicDateTime />
          </div>
        </div> 
      </LayoutIndex>
    </div>
    <!-- <LayoutIndex>
        <div class="layoutIndexBox">
          <el-skeleton style="width: 300px" :loading="getUserInfoLoading" animated>
            <template #template>
              <div class="ske flex_start">
                <div>
                  <el-skeleton-item 
                    variant="image"
                    style="width: 100px; height: 100px; border-radius: 50%;" 
                  />
                </div>
                <div class="des">
                  <div class="des-item">
                    <el-skeleton-item variant="text" style="margin-right: 16px" />
                    <el-skeleton-item variant="text" style="width: 50%" />
                  </div>
                  <div class="des-item">
                    <el-skeleton-item variant="text" style="margin-right: 16px" />
                    <el-skeleton-item variant="text" style="width: 50%" />
                  </div>
                </div>
              </div>
            </template>
            <template #default>
              <div class="left">
                <div class="l-img">
                  <el-image
                    style="width: 100px; height: 100px; border-radius: 50%;" 
                    :src="userInfo.avatar" 
                    fit="fill"
                    :preview-src-list="[userInfo.avatar]"
                  />
                </div>

                <div class="l-r-info" :style="{ fontSize: fontSize }">
                  <div class="info-top">
                    <div class="info-top-name">{{ userInfo.username }}</div>
                    <div class="info-top-role">
                      <el-tag v-if="userInfo.ismanager === 2">超级管理员</el-tag>
                      <el-tag v-else-if="userInfo.ismanager === 1">管理员</el-tag>
                      <el-tag type="success" v-else-if="userInfo.ismanager === 0">用户</el-tag>
                    </div>
                  </div>
                  <div class="info-bottom">
                    <div class="info-bottom-time">{{ userInfo.createTime.split(' ')[0] }}</div>
                    <div class="info-bottom-phone">
                      <el-icon>
                        <BasicIcon iconName="icon-phone" />
                      </el-icon>
                      <div style="margin-left: 5px">{{ userInfo.phone }}</div>
                    </div>
                  </div>
                </div>

              </div>
            </template>
          </el-skeleton>

          <div class="right">
            <BasicDateTime />
          </div>
        </div> 
    </LayoutIndex> -->
    <LayoutIndex>
      <el-carousel :interval="4000" type="card" height="220px" indicator-position="outside">
        <el-carousel-item v-for="item in carouselUrls" :key="item.id">
          <el-image
            style="width: 100%; height: 100%;"
            :src="item.imgUrl"
            fit="fill"
          />
        </el-carousel-item>
      </el-carousel>
    </LayoutIndex>
    <LayoutDetail>
      <div class="header flex_between">
        <div ref="divDomRef" v-click-outside:[divDomRef]="handleClickOutside">
          <el-button
            type="success"
            @click="enterOrExitFullScreen('EnterFullScreen')"
            >EnterFullScreen</el-button
          >
          <el-button
            type="success"
            @click="enterOrExitFullScreen('ExitFullScreen')"
            >ExitFullScreen</el-button
          >
          <el-button type="success" @click="reload()">刷新子路由</el-button>
        </div>
      </div>
      <div class="navBox flex_center">
        <div class="img-container">
          <div 
            class="img-item pointer flex_center"
            :style="{ fontSize: fontSize }"
            v-for="item in navImgs"
            :key="item.code"
            @click="goToNavHref(item.href)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </LayoutDetail>
  </div>
</template>

<script setup lang="ts">
import { Delete, Edit, Star, Upload } from "@element-plus/icons-vue";
import { inject, ref, onMounted, computed, reactive } from "vue";
import { useRouter } from "vue-router";
import useLoginStore from '@/store/login';
import { showMessageBox } from "@/utils/alertMsg";
import { storeToRefs } from "pinia";
import useThemeConfigStore from '@/store/themeConfig';
import BasicIcon from '@/components/BasicIcon/index.vue';
// 轮播图片
// import card1 from '@/assets/images/home/card1.png'
// import card2 from '@/assets/images/home/card2.png'
// import card3 from '@/assets/images/home/card3.png'
// import card4 from '@/assets/images/home/card4.png'
// import card5 from '@/assets/images/home/card5.png'
// import card6 from '@/assets/images/home/card6.png'
// import card7 from '@/assets/images/home/card7.png'
// import card8 from '@/assets/images/home/card8.png'
// import card9 from '@/assets/images/home/card9.png'
import newC1 from '@/assets/images/home/newC1.jpg'
import newC2 from '@/assets/images/home/newC2.jpg'
import newC3 from '@/assets/images/home/newC3.jpg'

const themeConfigStore = useThemeConfigStore();
const { getColor: color, getThemeFontSize: fontSize } = storeToRefs(themeConfigStore);
const reload: Function = inject("reload");
const enterOrExitFullScreen: Function = inject("enterOrExitFullScreen");
const loginStore = useLoginStore();

const { userInfo } = storeToRefs(loginStore);

let getUserInfoLoading = ref<boolean>(false);
onMounted(() => {
  getUserInfoLoading.value = true;
  loginStore.getAndSetUserInfo().then((res: any) => {
    if(res.code == 200) {
      // showMessageBox("success", res.msg, 3000, false);
    } else {
      showMessageBox("error", res.msg, 3000, false);
    }
  }).finally(() => {
    getUserInfoLoading.value = false;
  });
})
const router = useRouter()
// 轮播图路径
const carouselUrls = reactive([
  {
    id: 1,
    imgUrl: newC1
  },
  {
    id: 2,
    imgUrl: newC2
  },
  {
    id: 3,
    imgUrl: newC3
  }
])

// 导航栏数组
const navImgs = reactive([
  {
    code: 'projectBrief',
    name: '项目简介',
    href: '/proIntro',
    hasAuth: false
  },
  {
    code: 'TD3AlgorithmCompare',
    name: 'TD3算法对比',
    href: '/TD3AlgorithmCompare',
    hasAuth: false
  },
  {
    code: 'TD3AlgorithmVisual',
    name: 'TD3算法可视化',
    href: '/TD3AlgorithmVisual',
    hasAuth: false
  },
  {
    code: 'SACAlgorithmCompare',
    name: 'SAC算法对比',
    href: '/SACAlgorithmCompare',
    hasAuth: false
  },
  {
    code: 'SACAlgorithmVisual',
    name: 'SAC算法可视化',
    href: '/SACAlgorithmVisual',
    hasAuth: false
  },
  {
    code: 'TD3DataBigScreen',
    name: 'TD3-数据大屏',
    href: '/TD3DataBigScreen',
    hasAuth: false
  },
  {
    code: 'SACDataBigScreen',
    name: 'SAC-数据大屏',
    href: '/SACDataBigScreen',
    hasAuth: false
  },
  {
    code: 'userManagement',
    name: '用户/角色管理',
    href: '/userManagement',
    hasAuth: true
  },
  {
    code: 'personalInfo',
    name: '个人中心',
    href: '/personalInfo',
    hasAuth: false
  }
])

const goToNavHref = (href: string) => {
  router && router.push(href);
}

const divDomRef = ref<null | HTMLElement>(null);
const handleClickOutside = () => {
  // console.log("clickoutside---点击了外部");
};

function countDots(inputString: string, targetCharacter: string): number {
  let count = 0;
  for (let i = 0; i < inputString.length; i++) {
    if (inputString.charAt(i) === targetCharacter) {
      count++;
    }
  }
  return count;
}
const targetCharacter = ".";
let loadingText = ref<string>("数据加载中,请稍等");
// 十秒计时
const num = 10;
let index = 0;
const tid = setInterval(() => {
  if (index > num) {
    clearInterval(tid);
    return (loadingText.value = "数据加载完成");
  }
  index++;
  if (countDots(loadingText.value, targetCharacter) >= 6) {
    loadingText.value = "数据加载中,请稍等";
  }
  loadingText.value += ".";
}, 1000);

</script>

<style scoped lang="scss">
// 骨架屏
.ske {
  // border: 1px solid red;
  .des {
    width: 100%;
    height: 100%;
    .des-item {
      display: flex;
      align-items: center;
      justify-items: space-between;
      padding: 10px 5px;
      // border: 1px solid blue;
    }
  }
}

.layoutIndexOut {
  min-height: 180px;
  width: 100%;
  position: relative;
  z-index: 999;
  overflow: hidden;
  .layoutIndexFixed {
    position: fixed;
    width: 88.3vw;
    // width: 88.3%; /* 将父元素的内边距减去 */
    // width: 100%;
  }
}


.layoutIndexBox {
  display: flex;
  justify-content: space-between;
  .left {
    width: 35%;
    display: flex;
    padding: 10px 15px;
    // border: 1px solid red;
    .l-img {
      // border: 1px solid rgb(32, 10, 160);
    }
    .l-r-info {
      flex: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 5%;
      // border: 1px solid rgb(32, 10, 160);
      .info-top {
        // border: 1px solid red;
        padding: 10px 0;
        display: flex;
        align-items: center;
        .info-top-name {
          font-weight: bolder;
        }
        .info-top-role {
          margin-left: 10px;
        }
      }
      .info-bottom {
        // border: 1px solid red;
        padding: 10px 0;
        display: flex;
        align-items: center;
        .info-bottom-time {
          padding-right: 12px;
          border-right: 1px solid rgb(241, 241, 241);
        }
        .info-bottom-phone {
          padding-left: 12px;
          display: flex;
          align-items: center;
        }
      }
    }
  }
}

// 轮播图
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}


.navBox {
  // border: 1px solid red;
  margin-top: 130px;
}
// 块区图
.img-container {
  width: 615px;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
  // border: 1px solid red;
  box-sizing: border-box;
}

.img-item {
  width: 200px;
  height: 100px;
  box-shadow: inset 0 0 0 1px #fff;
  transition: 0.5s;
  background-image: url(@/assets/images/home/bg1.png);
  background-size: 600px 300px;
  position: relative;
  border-radius: 5px;
  color: #fff;
  &:hover {
    transform: translateY(-30px);
    font-size: 20px !important;
  }
}
.img-item:nth-child(3n+1){
  left: -160px;
  background-position-x: 0;
}

.img-item:nth-child(3n+2){
  left: 0px;
  background-position-x: -200px;
}

.img-item:nth-child(3n+3){
  left: 160px;
  background-position-x: -400px;
}

.img-item:nth-child(-n+6){
  top: 0px;
  background-position-y: -100px;
}
.img-item {
  top: 80px;
  background-position-y: -200px ;
}
.img-item:nth-child(-n+3){
  top: -80px;
  background-position-y: 0px;
}


.navBox:hover .img-item {
  // 动画前的状态
  margin: 2px;
  left: 0;
  top: 0;
  box-shadow: inset 0 0 0 0 #fff;
}

</style>
